<template>
    <div>
        <div class="team-wrap">
            <div>
                <span><em>&yen; {{sum_amt}}</em>元</span>
                <p>团队贡献</p>
            </div>
            <div>
                <span><em>{{sum_num}}</em>人</span>
                <p>团队成员</p>
            </div>
        </div>
        <van-tabs v-model="active" sticky animated>
            <van-tab v-for="(item,index) in tabTitle" :title="item" :key="index">
                <div v-if="index==0">
                    <p align="center" v-if="directly_team.length<1"><br/><br/>暂无数据</p>
                    <team-cell v-for="item in directly_team" :key="item.id" :userData="item" />
                </div>
                <div v-if="index==1">
                    <p align="center" v-if="second_team.length<1"><br/><br/>暂无数据</p>
                    <team-cell v-for="item in second_team" :key="item.id" :userData="item" />
                </div>
                
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import {myTeam} from '@/api/mine.js';
import {mapGetters} from 'vuex';
export default {
    data() {
        return {
            tabTitle:['直属团队','二级团队'],
            active:0,
            sum_amt:0,
            sum_num:0,
            directly_team:[],
            second_team:[],
        }
    },
    computed: {
        ...mapGetters(['userId']),
    },
    mounted() {
        myTeam({
            user_id:this.userId
        }).then(res=>{
            this.directly_team = res.directly_team
            this.second_team = res.second_team
            this.sum_amt = res.sum_amt
            this.sum_num = res.sum_num
        })
    },
    components: {
        TeamCell:()=>import('./components/TeamCell')
    }
}
</script>
<style lang="less" scoped>
.team-wrap{
    display: flex;
    align-items: center;
    padding: 30px 0;
    background: white;
    margin-bottom: 10px;
    text-align: center;
    div{
        flex: 1;
        &:first-child{
            border-right: 1px solid @border-color;
        }
        span{
            em{
                color: red;
                font-size: 23px;
                font-weight: 500;
                margin-right: 4px;
            }
        }
        p{
            color: @third-color;
            font-size: 13px;
            margin-top: 6px;
        }
    }
}
</style>